<template>

  <el-form label-width="150px">
    <el-form-item label="模板参考">
      <el-tag>
        <i class="el-icon-download"/>
        <a
          :href="'/static/ForExampleExcel.xlsx'">
          点击下载模板
        </a>
      </el-tag>
    </el-form-item>


    <!-- action必选参数，上传的地址   -->
    <el-form-item label="选择Excel">
      <el-upload
        ref="upload"
        :action="'http://localhost:9001/eduservice/subject/addSubject'"
        :on-preview="handlePreview"
        :disabled="importBtnDisabled"
        :on-remove="handleRemove"
        :on-error="handleError"
        :on-success="handleSuccess"
        :limit="1"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button :loading="loading" style="margin-left: 10px;" size="small" type="success" @click="submitUpload">
          上传到服务器
        </el-button>
        <div slot="tip" class="el-upload__tip">只能上传Excel文件</div>
      </el-upload>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      importBtnDisabled: false, // 按钮是否禁用,
      loading: false,
      BASE_API: process.env.BASE_API, // 接口API地址

    }
  },
  methods: {
    submitUpload() {
      // js: document.getElementById("upload").submit()
      this.$refs.upload.submit()
      this.importBtnDisabled = true// 按钮是否禁用,
      this.loading = true


    },
    handleRemove() {
      console.log();
      this.loading = false
      this.$message({
        type: 'success',
        message: '要删除我了'
      })
    },
    handlePreview() {
      console.log();
      this.loading = false
      this.$message({
        type: 'success',
        message: '点我干啥'
      })
    },
    handleError() {
      this.loading = false
      this.$message({
        type: 'error',
        message: '添加课程分类失败'
      })
    },
    handleSuccess() {
      //提示信息
      this.loading = false
      this.$message({
        type: 'success',
        message: '添加课程分类成功'
      })
      //跳转课程分类列表
      //路由跳转
      this.$router.push({path: '/subject/list'})
    }

  },
  filters: {}
}
</script>

<style scoped>

</style>
